<template>
  <div class="wrap">
    <Divider type="2" />

    <!-- 图片 -->
    <div class="tw-mt-10 images-wrap tw-px-6 sm:tw-px-24">
      <div ref="scroller" class="tw-flex tw-items-center tw-overflow-auto tw-whitespace-nowrap">
        <div
          v-for="(item, index) in items"
          :key="index"
          class="tw-m-auto image-wrap tw-w-32 tw-h-32 tw-px-1 sm:tw-w-40 sm:tw-h-40 tw-flex-shrink-0 tw-cursor-pointer"
          :class="{ 'is-active': chooseIndex === index }"
          @click="chooseIndex = index">
            <img
              :src="item.normal"
              class="magic tw-object-contain">
        </div>
      </div>
    </div>
    <div class="tw-mt-6 sm:tw-mt-8 tw-flex tw-justify-center">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="tw-w-4 tw-h-4 sm:tw-w-4 sm:tw-h-4 tw-bg-gray-100 tw-mx-2 tw-rounded-full tw-cursor-pointer hover:tw-bg-orange-200 tw-transition-all"
        :class="{'tw-bg-orange-300 sm:tw-bg-orange-400 tw-w-16 sm:tw-w-10': chooseIndex === index }"
        @click="chooseIndex = index"></div>
    </div>
    <!-- 遮罩 -->
    <!-- <div class="overlay" /> -->
    <!-- 内容 -->
    <div v-if="choose" class="tw-mt-12 sm:tw-mt-4 content tw-relative tw-z-8">
      <div class="title w-z-20 tw-overflow-hidden">{{ choose.name }}</div>
      <a-row class="tw-mt-0">
        <a-col
          :xs="{ span: 22, offset: 1 }"
          :md="{ span: 14, offset: 0 }">
          <div class="tw-flex tw-justify-center sm:tw-pb-20">
            <div class="tw-p-5" style="max-width: 400px;">
              <!--div class="tw-text-6xl tw-text-b-secondary tw-font-bold">{{ choose.name }}</div-->
              <div class="tw-mt-8 sm:tw-mt-6 tw-text-xl tw-text-b-secondary tw-font-bold tw-leading-6">
                {{ choose.desc }}
              </div>
              <div class="tw-mt-8 sm:tw-mt-6 tw-text-xl tw-text-b-secondary tw-font-bold tw-leading-6">
                Totem：{{ choose.totem }}
              </div>
              <div class="tw-mt-8 sm:tw-mt-6 tw-text-xl tw-text-b-secondary tw-font-bold tw-leading-6">
                Tribe/civilization：{{ choose.tribe }}
              </div>
               <div class="tw-mt-8 sm:tw-mt-6 tw-text-xl tw-text-b-secondary tw-font-bold tw-leading-6">
                Rarity：{{ choose.rarity }}
              </div>
            </div>
          </div>
        </a-col>
        <a-col
          :xs="{ span: 22, offset: 1 }"
          :md="{ span: 10, offset: 0 }"
          class="tw-text-center sm:tw-text-left tw-mb-4 sm:tw-mb-0 tw-p-12">
          <img :src="choose.active" class="magic tw-inline tw-w-64 tw-h-64 sm:tw-w-72 sm:tw-h-72">
        </a-col>
      </a-row>
    </div>

  </div>
</template>

<script setup>
import a1 from '@/assets/a1.png'
import a2 from '@/assets/a2.png'
import a3 from '@/assets/a3.png'
import a4 from '@/assets/a4.png'
import a5 from '@/assets/a5.png'
import a6 from '@/assets/a6.png'
import a7 from '@/assets/a7.png'

import a1a from '@/assets/a1a.png'
import a2a from '@/assets/a2a.png'
import a3a from '@/assets/a3a.png'
import a4a from '@/assets/a4a.png'
import a5a from '@/assets/a5a.png'
import a6a from '@/assets/a6a.png'
import a7a from '@/assets/a7a.png'

import { computed, ref, watch } from 'vue'

const items = [
  {
    name: 'Amorites',
    desc: 'The Amorites, who were excellent warriors, are the creators of the magnificent Babylonian civilization.',
    totem: 'Mushhushshu',
    tribe: 'Babylonian civilization',
    normal: a1a,
    active: a1a,
    rarity: 'N'
  },
  {
    name: 'Semite',
    desc: `They were rigorous, calm, and accustomed to speculation and reflection. They reflected on death and wrote philosophical dirges; they were always immersed themselves in a mild and dreamy thought. `,
    totem: 'Scarab',
    tribe: 'Ancient Egyptian civilization',
    normal: a2a,
    active: a2a,
    rarity: 'UR'
  },
  {
    name: 'Aryan',
    desc: `Aggression is their outstanding trait. Their people were good at riding and shooting. They always wandered around and fought against others. If it went well, they would capture others’ land. The one who had the brilliant combat performance would be regarded as the tribe warrior. `,
    totem: 'Ganesha',
    tribe: 'Ancient Indian civilization',
    normal: a3a,
    active: a3a,
    rarity: 'R'
  },
  {
    name: 'Yuanmou',
    desc: `Gathering and hunting were their ways to search for food. Due to the dangerous natural surroundings, Yuanmou often worked together, shared the food they got, lived in groups, and learned how to make stone tools and use fire. `,
    totem: 'Dragon',
    tribe: 'Chinese civilization',
    normal: a4a,
    active: a4a,
    rarity: 'UUR'
  },
  {
    name: 'Mayan',
    desc: `They were philosophical people who excelled at Mathematics, astronomy, and ritual activities. They were particularly interested in studying the time and observing stars. `,
    totem: 'Eagle',
    tribe: 'American Indian civilization',
    normal: a5a,
    active: a5a,
    rarity: 'UUR'
  },
  {
    name: 'Inuit',
    desc: `The Inuit were skilled at hunting. They lived primarily on prey, and raised their offspring collectively. The Inuit children often grew up in multiple families. `,
    totem: 'White Bear',
    tribe: 'Eskimo',
    normal: a6a,
    active: a6a,
    rarity: 'UUR',
    able: [50]
  }, 
  {
    name: 'Minoan',
    desc: `The Minoans were talented inventors and engineers, as evidenced by their luxurious palaces and fine art. Their society was highly civilized with advanced science and technology. Wars or serious diseases never hit them. They grew up like princes and princesses. They had fun making money and enjoyed the wonderful romance. After death, their souls would ascend to heaven. `,
    totem: 'Apollo',
    tribe: 'Ancient Greek civilization',
    normal: a7a,
    active: a7a,
    rarity: 'UUR',
    able: [50]
  }
]
const chooseIndex = ref(0)
const choose = computed({
  get() {
    return items[chooseIndex.value]
  },
  set(newVal) {
    if (!newVal) return
    chooseIndex.value = items.findIndex(o => o.name === newVal.name)
  }
})
const scroller = ref(null)

watch(chooseIndex, (newVal) => {
  if (!scroller.value) return
  const itemWid = scroller.value.scrollWidth / items.length
  const overflowWid = scroller.value.scrollWidth - scroller.value.clientWidth
  const currLeft = (newVal + 1) * itemWid
  scroller.value.scrollLeft = currLeft - overflowWid + itemWid / 2
})
</script>


<style lang="less" scoped>
  .wrap {
    position: relative;
    background-image: url("@/assets/bg2.png");
    background-repeat: repeat;
    overflow: hidden;
  }
  .image-wrap {
    position: relative;
    transition: all .3s ease-in-out;
    cursor: pointer;
    opacity: 0.85;
    transform: scale(0.9);
    &.is-active {
      transform: translate(0, -5px);
      opacity: 1;
      transform: scale(1.1);
    }
    // &.is-active:before {
    //   content: "";
    //   position: absolute;
    //   z-index: 0;
    //   left: 25%;
    //   right: 25%;
    //   bottom: 0;
    //   height: 10%;
    //   border-radius: 50%;
    //   overflow: hidden;
    //   transition: background .3s;
    //   background-image: radial-gradient(rgba(orange, .8) 25%, rgba(cyan, .5));
    //   transform: translate(0, 120%);
    // }
    img {
      position: relative;
      z-index: 1;
      transition: all .2s ease-in-out;
    }
  }
  .inner-wrap {
    position: relative;
  }

  :deep {
    .ant-progress-inner {
      border-radius: 0;
      .ant-progress-bg {
        height: 20px!important;
      }
    }
  }
  .overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 260px;
    bottom: 0;
    background-image: url("@/assets/bg3.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // background-color: rgba(0, 0, 0, .1);
  }
  .images-wrap {
    ::-webkit-scrollbar {
      display: none;
    }
  }
</style>